<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
      layout:decorate="~{admin/layout}">
<body>

<div class="content-wrap" layout:fragment="content">
    <style>
        .label{
            display: inline-block;
            width: 4%;
        }
        .btn-danger {
            color: #fff;
            background-color: #dd5826;
            border-color: #dd5826;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
        }
    </style>
    <main id="content" class="content" role="main">
        <ol class="breadcrumb">
            <li>苗木管理</li>
            <li class="active">编辑子地块</li>
        </ol>
        <div class="row">
            <div class="col-lg-8 col-lg-offset-1">
                <section class="widget">
                    <input id="areaid" type="hidden" th:value="${area.areaLocation_id}">
                    <header>
                        <h5>
                            编辑子地块
                        </h5>
                        <div class="widget-controls">
                            <a data-widgster="collapse" title="Collapse" href="#"><i class="glyphicon glyphicon-chevron-down"></i></a>
                            <a data-widgster="close" title="Close" href="#"><i class="glyphicon glyphicon-remove"></i></a>
                        </div>
                    </header>
                    <div class="widget-body" style="margin-left: 0;">
                        <fieldset>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">编号:</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" id="name">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">X坐标:</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" id="xpos"
                                           onkeyup="value=value.replace(/[^\d.]/g,'')">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">Y坐标:</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" id="ypos"
                                           onkeyup="value=value.replace(/[^\d.]/g,'')">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">高(单位:m)</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" id="height"
                                           onkeyup="value=value.replace(/[^\d.]/g,'')">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-md-4 form-control-label text-md-right">宽(单位:m)</label>
                                <div class="col-md-7">
                                    <input type="text" class="form-control" id="width"
                                           onkeyup="value=value.replace(/[^\d.]/g,'')">
                                </div>
                            </div>
                            <div class="col-md-offset-4 col-md-7">
                                <input type="submit" value="自动生成" id="autogenerate" class="btn btn-success width-100 mb-xs" role="button">
                                <input type="submit" value="添加地块" id="addsubmit" class="btn btn-success width-100 mb-xs" role="button">
                                <input type="submit" value="梯形地块" id="addtsland" class="btn btn-success width-100 mb-xs" role="button" data-toggle="modal" data-target="#tsland" data-whatever="@mdo">
                                <input type="submit" value="修改地块" id="updatesubmit" class="btn btn-primary width-100 mb-xs" role="button">
                                <input type="submit" value="删除地块" id="delsubmit" class="btn btn-danger width-100 mb-xs" role="button">
                                <input type="submit" value="横向道路" id="addroad" class="btn btn-info width-100 mb-xs" role="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">
                            </div>
                        </fieldset>
                    </div>
                </section>
            </div>
        </div>

        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">添加横向道路</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">地块号:</label>
                                <input type="text" class="form-control" id="recipient-name">
                            </div>
                            <div class="form-group">
                                <label for="road-width" class="control-label">路宽:</label>
                                <input type="text" class="form-control" id="road-width">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="btn_addroad">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="tsland" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">添加梯形地块</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">编号:</label>
                                <input type="text" class="form-control" id="ser-number">
                            </div>
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">左上角坐标(x,y):</label>
                                <input type="text" class="form-control" id="left-uppoint">
                            </div>
                            <div class="form-group">
                                <label for="road-width" class="control-label">右上角坐标(x,y):</label>
                                <input type="text" class="form-control" id="right-uppoint">
                            </div>
                            <div class="form-group">
                                <label for="road-width" class="control-label">左下角坐标(x,y):</label>
                                <input type="text" class="form-control" id="left-downpoint">
                            </div>
                            <div class="form-group">
                                <label for="road-width" class="control-label">右下角坐标(x,y):</label>
                                <input type="text" class="form-control" id="right-downpoint">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="btn_addts">确认</button>
                    </div>
                </div>
            </div>
        </div>

        <div >
            <canvas id="c2" width="11900" height="11700"> <!--宽高写在html里，写在css里有问题-->
                <span>该浏览器不支持canvas内容</span> <!--对于不支持canvas的浏览器显示-->
            </canvas>
        </div>
        <script th:inline="javascript">
            var oC = document.getElementById('c2');
            var canvas = oC.getContext('2d');
            var arrs=new Array();
            var scalearrs=new Array();
            var scalearrs2=new Array();
            var scale=5;
            var alllength,allwidth;
            function flush () {
                alllength=parseInt([[${area.length}]])*scale;
                allwidth=parseInt([[${area.breadth}]])*scale;
                canvas.clearRect(0, 0, 11900, 11700);
                drawArea(0, 0,allwidth, alllength);
                scalearrs=new Array();
                scalearrs2=new Array();
                for(var i=0;i<arrs.length;i++){
                    scalearrs.push(new Area(arrs[i].name,arrs[i].x*scale,arrs[i].y*scale,arrs[i].w*scale,arrs[i].h*scale));
                }
                for(var i=0;i<scalearrs.length;i++){
                    var obj=scalearrs[i];
                    drawArea(obj.x,obj.y,obj.w,obj.h);
                    canvas.strokeText(obj.name + "", obj.x + obj.w / 2.0 - 5, obj.y + obj.h / 2.0 + 5);
                }
                for(var i=0;i<arrs2.length;i++){
                    scalearrs2.push(new tsland(arrs2[i].name,arrs2[i].lefttopx*scale,arrs2[i].lefttopy*scale,arrs2[i].leftdownx*scale,arrs2[i].leftdowny*scale,arrs2[i].righttopx*scale,arrs2[i].righttopy*scale,arrs2[i].rightdownx*scale,arrs2[i].rightdowny*scale));
                }
                for(var i=0;i<scalearrs2.length;i++){
                    drawpath(scalearrs2[i].lefttopx,scalearrs2[i].lefttopy,scalearrs2[i].leftdownx,scalearrs2[i].leftdowny,scalearrs2[i].righttopx,scalearrs2[i].righttopy,scalearrs2[i].rightdownx,scalearrs2[i].rightdowny);
                    canvas.strokeText(scalearrs2[i].name + "", (scalearrs2[i].lefttopx +scalearrs2[i].leftdownx+scalearrs2[i].righttopx+scalearrs2[i].rightdownx)/ 4.0 - 5,(scalearrs2[i].lefttopy +scalearrs2[i].leftdowny+scalearrs2[i].righttopy+scalearrs2[i].rightdowny)/4.0 + 5);
                }
            };
            function drawpath(lefetopx,lefttopy,leftdownx,leftdowny,righttopx,righttopy,rightdownx,rightdowny){
                canvas.strokeStyle = "green";
                canvas.lineWidth = 1;
                canvas.beginPath();
                canvas.lineTo(lefetopx,lefttopy);
                canvas.lineTo(leftdownx,leftdowny);
                canvas.lineTo(rightdownx,rightdowny);
                canvas.lineTo(righttopx,righttopy);
                canvas.lineTo(lefetopx,lefttopy);
                canvas.closePath();
                canvas.stroke();
            }
            $("#btn_addts").click(function(){
                var leftuppoint=$("#left-uppoint").val();
                var leftdownpoint=$("#left-downpoint").val();
                var rightuppoint=$("#right-uppoint").val();
                var rightdownpoint=$("#right-downpoint").val();
                var sernumber=$("#ser-number").val();
                var areaid=$("#areaid").val();
                $.ajax({
                    url: "/api/landMass/createts",
                    type: 'POST',
                    data:{"areaLocation_id":areaid,"serialNumber":sernumber,"lefttoppoint":leftuppoint,"righttoppoint":rightuppoint,"leftdownpoint":leftdownpoint,"rightdownpoint":rightdownpoint},
                    async: true,
                    success: function (data) {
                        console.log("data",data);
                        getlandlist();
                        $("#tsland").modal("hide")
                    },
                    error: function (xhr) {
                        console.log("error");
                        $("#tsland").modal("hide")
                    }
                });
            });
            $("#btn_addroad").click(function () {
                var landnumber=$("#recipient-name").val();
                var roadwidth=$("#road-width").val();
                var areaid=$("#areaid").val();
                $.ajax({
                    url: "/api/area/addroad",
                    type: 'GET',
                    data:{"areaid":areaid,"landnumber":landnumber,"roadwidth":roadwidth},
                    async: true,
                    success: function (data) {
                        console.log("data",data);
                        getlandlist();
                        $("#exampleModal").modal("hide")
                    },
                    error: function (xhr) {
                        console.log("error");
                        $("#exampleModal").modal("hide")
                    }
                });
            });
            oC.addEventListener('click', function (ev) {
                var e = ev || window.event;//获取event对象
                var rect = oC.getBoundingClientRect();
                var x = e.clientX - rect.left * (oC.width / oC.width);
                var y = e.clientY - rect.top * (oC.height / oC.height);
                var index = findArea(x, y);
                if (index != -10000) {
                    if(index>=0){
                        $("#name").val(arrs[index].name);
                        $("#xpos").val(arrs[index].x);
                        $("#ypos").val(arrs[index].y);
                        $("#width").val(arrs[index].w);
                        $("#height").val(arrs[index].h);
                    }else{
                        var target=-(index+1);
                        $("#name").val(arrs2[target].name);
                    }
                }
            }, false);
            oC.onmousedown = function(ev){
                var e = ev || window.event;//获取event对象
                var rect = oC.getBoundingClientRect();
                var x = e.clientX - rect.left * (oC.width / oC.width);
                var y = e.clientY - rect.top * (oC.height / oC.height);
                var index=findArea(x, y);
                if(index!=-10000){
                    drag(index);
                }else{
                    oC.onmousemove = null;
                    oC.onmouseup = null;
                }
            };
            drag=function (index) {
                oC.onmousemove = function (ev) {
                    var e = ev || window.event;//获取event对象
                    var rect = oC.getBoundingClientRect();
                    var x = e.clientX - rect.left * (oC.width / oC.width);
                    var y = e.clientY - rect.top * (oC.height / oC.height);
                    console.log("name",arrs[index].name)
                    if(index>=0){
                        arrs[index].x=x/scale;
                        arrs[index].y=y/scale;
                        $("#name").val(arrs[index].name);
                        $("#xpos").val(arrs[index].x);
                        $("#ypos").val(arrs[index].y);
                        $("#width").val(arrs[index].w);
                        $("#height").val(arrs[index].h);
                    }else{

                    }
                    flush();
                };
                oC.onmouseup = function(){
                    oC.onmousemove = null;
//                    oC.onmouseup = null;
                };
            };

            findArea = function (x, y) {
                console.log("x:" + x + "y:" + y);
                if (scalearrs == null)return -1;
                else {
                    var len = scalearrs.length;
                    for (var i = 0; i < len; i++) {
                        if (x > scalearrs[i].x && x < scalearrs[i].x + scalearrs[i].w && y > scalearrs[i].y && y < scalearrs[i].y + scalearrs[i].h) {
                            return i;
                        }
                    }
                    var len=scalearrs2.length;
                    for(var i=0;i<len;i++){
                        var obj=scalearrs2[i];
                        var minx=obj.lefttopx>obj.leftdownx?obj.leftdownx:obj.lefttopx;
                        var maxx=obj.righttopx>obj.rightdownx?obj.righttopx:obj.rightdownx;
                        var miny=obj.lefttopy>obj.leftdowny?obj.leftdowny:obj.lefttopy;
                        var maxy=obj.righttopy>obj.rightdowny?obj.righttopy:obj.rightdowny;
                        if(x>minx&&x<maxx&&y>miny&&y<maxy){
                            return -i-1;
                        }
                    }
                }
                return -10000;
            };
           function  drawArea(x,y,w,h) {
                canvas.strokeStyle = "green";
                canvas.lineWidth = 1;
                canvas.strokeRect(x, y, w, h);
            };
            function Area(name,x, y, w, h) {
                this.name=name;
                this.x = x;
                this.y = y;
                this.w = w;
                this.h = h;
            }
            function tsland(name,lefttopx,lefttopy,leftdownx,leftdowny,righttopx,righttopy,rightdownx,rightdowny) {
                this.name=name;
                this.lefttopx=lefttopx;
                this.lefttopy=lefttopy;
                this.leftdownx=leftdownx;
                this.leftdowny=leftdowny;
                this.righttopx=righttopx;
                this.righttopy=righttopy;
                this.rightdownx=rightdownx;
                this.rightdowny=rightdowny;
            }
            function getlandlist() {
                $.ajax({
                    url: "/api/batch/getland?areaid="+$("#areaid").val(),
                    type: 'GET',
                    async: false,
                    success: function (data) {
                        console.log(data);
                        arrs=new Array();
                        arrs2=new Array();
                        for(var i=0;i<data.length;i++){
                            var obj=data[i];
                            if(obj.shapetype==0){
                                arrs.push(new Area(obj.serialNumber,obj.xcoordinate,obj.ycoordinate,obj.breadth,obj.length))
                            }else{
                                arrs2.push(new tsland(obj.serialNumber,obj.lefttopx,obj.lefttopy,obj.leftdownx,obj.leftdowny,obj.righttopx,obj.righttopy,obj.rightdownx,obj.rightdowny));
                            }
                        }
                        flush();
                    },
                    error: function (xhr) {
                        console.log("error");
                    }
                });
            }
            getlandlist();
            $("#addsubmit").click(function () {
                addlandmass();
            });
            function addlandmass() {
                $.ajax({
                    url: "/api/landMass/create",
                    type: 'POST',
                    data:{
                        "areaLocation_id":$("#areaid").val(),
                        "serialNumber":$("#name").val(),
                        "Xcoordinate":$("#xpos").val(),
                        "Ycoordinate":$("#ypos").val(),
                        "breath":$("#width").val(),
                        "length":$("#height").val(),
                    },
                    async: false,
                    success: function (data) {
                        console.log(data);
                        getlandlist();
                        var index=arrs.length-1;
                        $("#name").val(arrs[index].name);
                        $("#xpos").val(arrs[index].x);
                        $("#ypos").val(arrs[index].y+arrs[index].h);
                        $("#width").val(arrs[index].w);
                        $("#height").val(arrs[index].h);
                    },
                    error: function (xhr) {
                        console.log("error");
                    }
                });
            }

            $("#updatesubmit").click(function () {
                $.ajax({
                    url: "/api/landMass/update",
                    type: 'POST',
                    data:{
                        "areaid":$("#areaid").val(),
                        "serialNumber":$("#name").val(),
                        "Xcoordinate":$("#xpos").val(),
                        "Ycoordinate":$("#ypos").val(),
                        "breadth":$("#width").val(),
                        "length":$("#height").val(),
                    },
                    async: false,
                    success: function (data) {
                        console.log(data);
                        getlandlist();
                    },
                    error: function (xhr) {
                        console.log("error");
                    }
                });
            });
            $("#autogenerate").click(function(){
                 location.href="/admin/areaLocation/toautogenerate?areaid="+$("#areaid").val();
            });
            $("#delsubmit").click(function () {
//                for(var i=0;i<arrs.length;i++){
//                    if(arrs[i].name==$("#name").val()){
//                        arrs[i].x=0;
//                        arrs[i].y=0;
//                        arrs[i].w=0;
//                        arrs[i].h=0;
//                        scalearrs[i].x=0;
//                        scalearrs[i].y=0;
//                        scalearrs[i].w=0;
//                        scalearrs[i].h=0;
//                    }
//                }
//                flush();
                $.ajax({
                    url: "/api/landMass/delland",
                    type: 'POST',
                    data:{
                        "areaid":$("#areaid").val(),
                        "serialNumber":$("#name").val(),
                    },
                    async: false,
                    success: function (data) {
                        console.log(data);
                        getlandlist();
                    },
                    error: function (xhr) {
                        console.log("error");
                    }
                });
            });
            $("#uploadsubmit").click(function () {
                console.log("json", JSON.stringify(arrs));
                $.ajax({
                    url: "/admin/areaLocation/savearea",
                    contentType: "application/json; charset=utf-8",
                    data:JSON.stringify(arrs),
                    type: 'POST',
                    async: false,
                    success: function (data) {
                        console.log("data", data);
                        alert('上传成功');
                    },
                    error: function (xhr) {
                        console.log("error");
                    }
                });
            });
            function point(){
                this.x=0;
                this.y=0;
            }
        </script>
    </main>
</div>
</body>
</html>
